Water Mobile - documentation

V1.0

Introduction

Welcome to the Water Mobile theme documentation, by theunexpected1. Use the menu to left side to navigate quickly through the documentation.

If you're having an issue with the theme and can't find the answer here, then please send me an email through my profile page: http://themeforest.net/theunexpected1 and I will try to answer you as quickly as possible.

Please read the documentation carefully before sending a support request. The chance you could find the answer here is big and would save you a lot of time!

Overview

Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find 2 versions.

  • PHP version

  • HTML version

The template is built with the latest standards of front end development, compatible with all smartphones and tablet devices available in the market including but not limited to iPhone, iPad, Android devices, Blackberry and Windows Phone 7.

The tempalte uses quality techniques like LESS CSS to reduce coding time by re-using common code, bringing programming hierarchy into styling and makes the template really easy to customize. Say, for example, changing the entire template's color theme can be just 1 line-changer.

Features

Template features:

  • Minimalistic design language

  • W3 valid HTML5 Liquid Layout

  • Unlimited theming possibilites

  • All Company pages: About | Services/Products | Portfolio Gallery | Videos Gallery | Photos Gallery | Career | Blog | Contact | [Add more pages]

  • Info page - for PhoneGap Applications or general overlay-type of a page

  • Web Compatible standard typography

  • Google Fonts

  • Working AJAX Contact form with Validation and Email Submission

  • Google Maps

  • Social presence links

Theme Customizations

This template is unique in it's own way - it can allow you to specify a "theme" color for your template, and it automatically styles the whole website based on that theme color. This is a single "css" property change on your part, and the website uses light and dark shades of your primary color throughout the template - it works like magic, using {less} CSS!

/*
File: /css/styles.less
*/
 
/* less codes */
	     
	     
	     
/* sample color themes*/
@red :#e51400;
@blue: #0076a3;
 
/*just change the below to suit your needs*/
@themeColor: @blue;
 

/*use it to glory*/
color: @themeColor;

Typography & Usage

This template comes packed with a handful of typography components, below is how you can use these within your pages:

  • Headers
    								
    								
    								Refer to typography page for below code preview:
    								

    H1

    H1 Mini

    H1 special

    H1 Special Mini

    H1 Border

  • Post Types Type-1
    				
    								
    								
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    26-Jan-13 Read More
    type-1

    Type-2
    				
    								
    								
    Image
    Built Google Chrome > Made it open source
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    type-2
  • Photo Albums
    								
    							
    albums
  • Photo Galleries Provide the number of columns you require as a data attribute to the main .gallery-items as below and the columns will build autmatically (jQuery splitter)
    					
    								
    							
    gallery
  • Columns - 1 / 2 / 3 / 4 Regular paragraphs can be split into columns groups of up to 4 columns in the following way:
    								

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

    Change 'column-2' with any number (between 1-4). Eg: 'column-4'
  • Simple Lists
    								
    							
  • Forms & Forms elements
    								
    								
    								
    								
    							
  • Links / Buttons
    								                
    								
    								
  • Light / Dark Page Add the class 'dark-page' to the main Div of a page to make it a dark page. Check "Info Page" for reference.
    								
    ... ... ...
  • Messages
    								
    Success Message.
    Warning Message.
    Error Message.
    Notification Message.
  • Forms Forms have enabled validation and ajax submission. However, if you wish to disable ajax on any form, just add the class 'no-ajax' to the Form tag and the form will normall submit via postback. Refer to forms.js for codes specific to form binding.
    								

LESS Framework

{less} CSS

All template styles related to layout and design (except third party) can be found in: /less/styles.less

Powerful Less CSS
The template leverages the power of dynamic and structured CSS writing style, and makes writing CSS a lot more readable and easier. Use of variables reduces your work and makes the code less messier. Below is an example:

Nesting CSS Classes:

						/* You can write the below: */
						.parent-container {
							padding: 10px;
							
							.child-container {
								border: 1px solid #000;
								padding: 5px;
							}
						}
						
						/* Old-style not required like the below: */
						.parent-container {
							padding: 10px;
						}	
						.parent-container .child-container {
							border: 1px solid #000;
							padding: 5px;
						}
					

Use of Variables:

						/* You can write the below: */
						@themeColor: #ec12e3;
						
						/* You will see that this variable can be easily used instead of
						writing real color, making it easier to change your website "theme"
						at the snap of your fingers - so easy! Below example: */
						.heading {
							color: @themeColor;
						}
						p {
							background-color: @themeColor;
						}
					

Traditional CSS alternative
For some reason if you decide to not use the power of lessCSS, you can anytime start writing normal simple css, as well - the template supports both styles

						/* Below will also work if you don't want lessCSS: */
						.parent-container {
							padding: 10px;
						}	
						.parent-container .child-container {
							border: 1px solid #000;
							padding: 5px;
						}
					


To learn more, head to {Less} CSS

Mobile Detection

You will need to detect on your primary desktop website whether the visitor is accessing from a computer, or a phone or a tablet.
The code below will help you detect the device of the user on both server-side(PHP) and client-side (JavaScript).

Please find the Php code files in "Source/MobileDetect.zip"

For using the javascript detection, you will need to include the file from MobileDetect.zip "MobileDetect.js", and run the following code in your primary website.

						$(document).ready(function(){
							AppUtility.mobile.detect("http://m.sitename.com");
						});
					

For using the php detection, you will need to include the file from MobileDetect.zip "php-mobile-detect.v.2.1.RC/Mobile_Detect.php", and run the following code in your primary website.

						// Check for mobile device.
						require_once 'Mobile_Detect.php';
						$detect = new Mobile_Detect();
						$layout = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop');
					

Javascript

Here is a short explanation of the javascript files we have included with the theme.

  • js/forms.js Is used for the binding of form with validation and submission.

  • js/main.js This file contains javascript for the custom scripts used in the theme.

    This file is broken down into
    1. App Object - this object enlists all the functionalities
    2. Bindings - this includes general and page level bindings and actions
    3. Events - On specific events, these actions should take place (like on resizing window - rare case but we still consider it)
    4. Extras - Any extra functions can be collected in this space
    5. Main - Initiates the App and enables all events
  • Rest of the files are assistance libraries / core to framework (modernizer, jquery, jquerymobile, etc.)

Soruces & Credits

We have used the following opensource projects, fonts or other files as listed.